var ImgsPreview = function () {
  var template = /* html */ `
    <div class="imgs-preview">
      <div class="imgs-preview-content">
        <el-image :src="imgUrl" fit="scale-down" :preview-src-list="[imgUrl]"></el-image>
      </div>
      <div class="imgs-preview-tabe">
        <div class="imgs-preview-list clearfix">
          <div v-for="(img,index) in imgs" :key="img" class="imgs-preview-item" :class="{'select':index===selectIndex}"
            @mouseover="handleMouseover(index)">
            <el-image :src="img" fit="scale-down"></el-image>
          </div>
        </div>
      </div>
    </div>
  `;

  return {
    props: {
      imgs: {
        type: Array,
        required: true
      }
    },

    computed:{
      imgUrl:function(){
        var imgs = this.imgs;
        var index = this.selectIndex;
        return imgs[index];
      }
    },

    data: function () {
      return {
        selectIndex:0
      };
    },

    methods:{
      handleMouseover:function(index){
        this.selectIndex = index;
      }
    },

    template: template
  };
}();
